<template>
  <div class="content">
    <ul>
      <li>
        <div class="time">
          8:00抢购
        </div>
        <ul class="bg-fff">
          <li class="conli">
            <div class="good-img"><img src="./images/goods.png"></div>
            <div class="c-right">
              <div class="name">
                52°郎酒高纯500ml*6瓶包邮配送
              </div>
              <div class="c-middle">
                <div class="newprice">¥128</div>
                <div class="buynow">立即抢购</div>
              </div>
              <div class="c-bottom">
                <div class="oldprice"> <del>¥108</del></div>
                <div class="jindu">
                  <span class="shengyu">仅剩100件</span>
                  <span><progress class="pro-wh" value="30" max="100"></progress></span></div>
              </div>
            </div>


          </li>
          <li class="conli">
            <div class="good-img"><img src="./images/goods.png"></div>
            <div class="c-right">
              <div class="name">
                52°郎酒高纯500ml*6瓶包邮配送
              </div>
              <div class="c-middle">
                <div class="newprice">¥128</div>
                <div class="buynow">立即抢购</div>
              </div>
              <div class="c-bottom">
                <div class="oldprice"> <del>¥108</del></div>
                <div class="jindu">
                  <span class="shengyu">仅剩100件</span>
                  <span><progress class="pro-wh" value="30" max="100"></progress></span></div>
              </div>
            </div>


          </li>
        </ul>
      </li>
      <li>
        <div class="time">
          8:00抢购
        </div>
        <ul class="bg-fff">
          <li class="conli">
            <div class="good-img"><img src="./images/goods.png"></div>
            <div class="c-right">
              <div class="name">
                52°郎酒高纯500ml*6瓶包邮配送
              </div>
              <div class="c-middle">
                <div class="newprice">¥128</div>
                <div class="buynow">立即抢购</div>
              </div>
              <div class="c-bottom">
                <div class="oldprice"> <del>¥108</del></div>
                <div class="jindu">
                  <span class="shengyu">仅剩100件</span>
                  <span><progress class="pro-wh" value="30" max="100"></progress></span></div>
              </div>
            </div>


          </li>
          <li class="conli">
            <div class="good-img"><img src="./images/goods.png"></div>
            <div class="c-right">
              <div class="name">
                52°郎酒高纯500ml*6瓶包邮配送
              </div>
              <div class="c-middle">
                <div class="newprice">¥128</div>
                <div class="buynow">立即抢购</div>
              </div>
              <div class="c-bottom">
                <div class="oldprice"> <del>¥108</del></div>
                <div class="jindu">
                  <span class="shengyu">仅剩100件</span>
                  <span><progress class="pro-wh" value="30" max="100"></progress></span></div>
              </div>
            </div>


          </li>
        </ul>
      </li>
    </ul>

  </div>
</template>

<script>
  export default {
    components: {},
    data(){
      return {};
    },
    mounted(){

    },
    methods: {},
    filters: {}
  }
</script>


<style scoped>
  .content{
    text-align: left;
  }

  .time{
    padding: .5rem .75rem;
  }
  .conli{
    overflow: hidden;
    padding: .75rem;
    border-bottom: 1px solid #eee;
  }
  .good-img{
    float: left;
    width: 4.5rem;
    height: 4.5rem;
  }
  .good-img img{
    width: 100%;
    height: 100%;
  }

  .c-right{
    float: left;
    padding-left: .5rem;
    width: calc(100% - 4.5rem);
  }
  .name{
    font-size: .8rem;
    color: #333333;
  }

  .c-middle{
    overflow: hidden;
    margin-top: 1rem;
  }

  .newprice{
    float: left;
    color: #F74C4E;
    font-size: .9rem;
  }
  .buynow{
    width: 3.5rem;
    padding: .2rem 0;
    text-align: center;
    float: right;
    background: #E93B3D;
    border-radius: 100px;
    font-size: .55rem;
    color: #FFFFFF;
    margin-right: .5rem;

  }

  .c-bottom{
    overflow: hidden;
    margin-top: .5rem;
  }
  .oldprice{
    float: left;
    font-size: .6rem;
    color: #999999;
    margin-top: .2rem;
  }
  .shengyu{
    font-size: .6rem;
    color: #999999;
  }
  .jindu{
    float: right;
    width: calc(100% - 2rem);
    margin-right: .5rem;
    text-align: right;
  }

  .pro-wh {
    width: 5rem;
    height: .25rem;
    margin-bottom: .2rem;
  }

  progress {
    background-color: #ececec;
  }

  progress::-webkit-progress-bar {
    background-color: #ececec;
  }

  progress::-webkit-progress-value {
    background-color: #F74C4E;
  }


</style>
